<style>
  *{
    margin: 0;
    padding: 0;
  }


  .diaplay{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .template{
    width: 100vw;
    height: 100vh;
    justify-content: space-between;
    /*background: url('./img/left-img.svg') no-repeat;*/
    background-size: auto 100%;
  }
  .left-img{
    width:auto;
    height:auto;
    /* border: 1px solid red; */
    position: relative;
  }
  /* 右边登录内容 */
  .right{
    width: 100%;
    height: 100%;
    justify-content: center;
    background: white;
  }
  .right-box{
    width: 400px;

    justify-content: center;

    padding: 30px;

    /* border: 1px solid red; */

  }
  .right-header{
    justify-content: flex-start;
  }
  .right-header img{
    width: auto;
    height: 30px;
    /* border: 1px solid red; */

  }
  .right-header p{

    font-size:23px;
    font-family: PingFang SC, PingFang SC-Heavy;
    font-weight: 800;
    text-align: left;
    color: #001837;
    margin-left: 8px;
  }
  .right-userName{
    justify-content:flex-start;
    margin-top: 30px;
  }
  .right-userName p{
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
  }
  .right-userName input{
    width: 100%;
    height: 50px;
    border: 1px solid #dddddd;
    outline: none;
    background: #f4f4f4;
    border-radius: 5px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #000000;
    margin-top: 10px;
    box-sizing: border-box;
    text-indent: 20px;
  }
  .right-userName input:focus{
    background: white;
  }
  .right-passWord{
    margin-top: 20px;
  }
  .right-code{
    margin-top: 20px;
  }
  .right-code-div{
    justify-content: flex-start;
    margin-top: 5px;

  }
  .right-code-div input{



  }
  .right-code-div img{
    width: 160px;
    height: 50px;
    margin-left: 10px;


  }
  /* 登录按钮 */
  .login{
    width: 230px;
    height: 50px;
    background: linear-gradient(180deg,#0390fe, #3563ea);
    border-radius: 5px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 52px;
    margin-top: 47px;
  }
</style>
<div class="template diaplay">
  <div class="right diaplay">
      <div class="right-box">
        <div class="right-header diaplay">
          <img src="layui/images/imgs/logo.svg" alt="">
          <p>登陆平台</p>
        </div>
        <form>
          <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <input name="vercodeRandomStr" id="vercodeRandomStr" type='hidden'>
            <div class="layui-form-item right-userName">
              <p>用户名</p>
              <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
            </div>
            <div class="right-passWord right-userName">
              <p>密码</p>
              <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="请输入密码" class="layui-input">
            </div>
            <div class="right-code right-userName">
              <p>图形验证码</p>
              <div class="right-code-div diaplay">
                <input type="text" name="vercode" lay-verify="required" id="LAY-user-login-vercode" autocomplete="off" placeholder="请输入图形验证码" class="layui-input">
                <img src="" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
              </div>
            </div>
            <div class="right-userName">
              <p>谷歌验证码</p>
              <input type="number" name="googleCode" id="LAY-user-login-google-code" placeholder="谷歌验证码（如未绑定不必填写）" class="layui-input">
            </div>
            <div class="layui-form-item" >
              <div class="login layui-btn" id="login-btn2" lay-submit lay-filter="LAY-user-login-submit" onclick="return false;">登 入</div>
            </div>
          </div>
        </form>
    </div>
  </div>
</div>
<script>
layui.use(['admin', 'form', 'user'], function(){
  var $ = layui.$
  ,setter = layui.setter
  ,admin = layui.admin
  ,form = layui.form
  ,router = layui.router()
  ,search = router.search;

  //变更网站标题
  $.ajax({
    async: false, type: 'get',
    url: layui.setter.baseUrl + '/auth/siteTitle',
    success: function(res){
      $("#siteLogo").append('<img src="'+res.data.siteLogo+'" style="height: 30px;width: 120px;" alt="'+res.data.siteTitle+'">');
      $("#copyRight").text(res.data.copyRight);
      $("#serviceTel").append(res.data.serviceTel);
      $("#serviceQQ").attr("href", 'http://wpa.qq.com/msgrd?v=3&uin='+res.data.serviceQQ+'&site=qq&menu=yes').append(res.data.serviceQQ);
    }
  });

  //变更网站标题
  $('.siteTitle').text(layui.data(layui.setter.tableName).siteTitle);

  form.render();

  $.loginOk = function(res) {
    //请求成功后，写入 access_token
    layui.data(setter.tableName, {
      key: setter.request.tokenName
      ,value: res.data.access_token
    });

    //登入成功的提示与跳转
    layer.msg('登入成功', {
      offset: '15px'
      ,icon: 1
      ,time: 1000
    }, function(){
      location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
    });
  };

  //提交
  form.on('submit(LAY-user-login-submit)', function(obj){

    //请求登入接口
    admin.req({
      url: layui.setter.baseUrl + '/auth' //实际使用请改成服务端真实接口
      ,data: obj.field
      ,done: function(res){
        $.loginOk(res);
      }
    });
  });

  $.randomString = function (len) {
      len = len || 32;
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = '';
      for (i = 0; i < len; i++) {
          pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
  };

  $('body').off('click', "#LAY-user-get-vercode").on('click', "#LAY-user-get-vercode", function(){
      var vercodeRandomStr = $.randomString(6) + new Date().getTime();
      alert(vercodeRandomStr);
      $("#vercodeRandomStr").val(vercodeRandomStr);
      $("#LAY-user-get-vercode").attr('src', layui.setter.baseUrl + '/auth/vercode?vercodeRandomStr=' + vercodeRandomStr);
  });

  $("#LAY-user-get-vercode").click();

  $(".layui-input").keyup(function(){
    //如果三个输入框都存在值， 则按钮不在置灰
    if($("#LAY-user-login-username").val().length > 0 && $("#LAY-user-login-password").val().length > 0 && $("#LAY-user-login-vercode").val().length > 0){
      $('#login-btn2').removeClass('login-opacity06').addClass('login-opacity10');
    }else{
      $('#login-btn2').removeClass('login-opacity10').addClass('login-opacity06');
    }
  });

});
</script>
